<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div th:replace="common/top"></div>
                <div id="Content">
                        <div id="BackLink">
                                <a href="/catalog/view">Return to Main Menu</a>
                        </div>

                        <div id="Catalog">

                                <table>
                                        <tr>
                                                <td th:text="'ORDER '+${order.orderId}" align="center">Order #</td>
                                                <td th:text="${order.orderDate}"
                                                    pattern="yyyy/MM/dd hh:mm:ss">
                                                        order.orderDate
                                                </td>
                                        </tr>
                                        <tr>
                                                <th colspan="2">Payment Details</th>
                                        </tr>
                                        <tr>
                                                <td>Card Type:</td>
                                                <td th:text="${order.cardType}"></td>
                                        </tr>
                                        <tr>
                                                <td>Card Number:</td>
                                                <td th:text="${order.creditCard}"></td>
                                        </tr>
                                        <tr>
                                                <td>Expiry Date (MM/YYYY):</td>
                                                <td th:text="${order.expiryDate}"></td>
                                        </tr>
                                        <tr>
                                                <th colspan="2">Billing Address</th>
                                        </tr>
                                        <tr>
                                                <td>First name:</td>
                                                <td th:text="${order.billToFirstName}"></td>
                                        </tr>
                                        <tr>
                                                <td>Last name:</td>
                                                <td th:text="${order.billToLastName}"></td>
                                        </tr>
                                        <tr>
                                                <td>Address 1:</td>
                                                <td th:text="${order.billAddress1}"></td>
                                        </tr>
                                        <tr>
                                                <td>Address 2:</td>
                                                <td th:text="${order.billAddress2}"></td>
                                        </tr>
                                        <tr>
                                                <td>City:</td>
                                                <td th:text="${order.billCity}"></td>
                                        </tr>
                                        <tr>
                                                <td>State:</td>
                                                <td th:text="${order.billState}"></td>
                                        </tr>
                                        <tr>
                                                <td>Zip:</td>
                                                <td th:text="${order.billZip}"></td>
                                        </tr>
                                        <tr>
                                                <td>Country:</td>
                                                <td th:text="${order.billCountry}"></td>
                                        </tr>
                                        <tr>
                                                <th colspan="2">Shipping Address</th>
                                        </tr>
                                        <tr>
                                                <td>First name:</td>
                                                <td th:text="${order.shipToFirstName}"></td>
                                        </tr>
                                        <tr>
                                                <td>Last name:</td>
                                                <td th:text="${order.shipToLastName}"></td>
                                        </tr>
                                        <tr>
                                                <td>Address 1:</td>
                                                <td th:text="${order.shipAddress1}"></td>
                                        </tr>
                                        <tr>
                                                <td>Address 2:</td>
                                                <td th:text="${order.shipAddress2}"></td>
                                        </tr>
                                        <tr>
                                                <td>City:</td>
                                                <td th:text="${order.shipCity}"></td>
                                        </tr>
                                        <tr>
                                                <td>State:</td>
                                                <td th:text="${order.shipState}"></td>
                                        </tr>
                                        <tr>
                                                <td>Zip:</td>
                                                <td th:text="${order.shipZip}"></td>
                                        </tr>
                                        <tr>
                                                <td>Country:</td>
                                                <td th:text="${order.shipCountry}"></td>
                                        </tr>
                                        <tr>
                                                <td>Courier:</td>
                                                <td th:text="${order.courier}"></td>
                                        </tr>
                                        <tr>
                                                <td>Status:</td>
                                                <td th:text="${order.status}"></td>
                                        </tr>
                                        <tr>
                                                <td colspan="2">
                                                        <table>
                                                                <tr>
                                                                        <th>Item ID</th>
                                                                        <th>Description</th>
                                                                        <th>Quantity</th>
                                                                        <th>Price</th>
                                                                        <th>Total Cost</th>
                                                                </tr>
                                                                <tr th:each="lineItem:${order.getLineItems()}">
                                                                        <td><a th:text="${lineItem.item.itemId}"
                                                                               th:href="@{'/catalog/viewItem?itemId='+${lineItem.item.itemId}}">
                                                                        </a></td>
                                                                        <td th:if="${lineItem.item!=null}" th:text="${lineItem.item.attribute1}+
                                                 ${lineItem.item.attribute2}+
                                                 ${lineItem.item.attribute3}+
                                                 ${lineItem.item.attribute4}+
                                                 ${lineItem.item.attribute5}+
                                                 ${lineItem.item.product.name}"></td>
                                                                        <td th:if="${lineItem.item==null}">
                                                                                <i>{description unavailable}</i>
                                                                        </td>

                                                                        <td th:text="${lineItem.quantity}">
                                                                                cartItem.quantity
                                                                        </td>
                                                                        <td th:text="${lineItem.item.listPrice}"
                                                                            pattern="$#,##0.00"></td>
                                                                        <td th:text="${lineItem.total}"
                                                                            pattern="$#,##0.00"></td>
                                                                </tr>
                                                                <tr>
                                                                        <th colspan="3">Total:
                                                                        <td th:text="${order.totalPrice}"
                                                                            pattern="$#,##0.00"></td>
                                                                        </th>
                                                                </tr>
                                                                <tr>
                                                                        <th colspan="5" style="text-align: center"> <a th:href="@{/order/pay(totalPrice=${order.totalPrice},orderId=23867227,orderName=123,orderDescrip=123)}">去支付</a>
                                                                        <td></td>
                                                                        </th>
                                                                </tr>
                                                        </table>
                                                </td>
                                        </tr>

                                </table>

                        </div>
                </div>

        <div th:replace="common/bottom"></div>

    </body>
</html>